<template>
  <div class="box">
    <div class="address">地区：{{ fullname }}</div>
    <div class="areaName">
      <span @click="toshen(0)" :class="activeIndex === 0 ? 'active' : ''">省份</span>
      <span @click="toshi(1)" :class="activeIndex === 1 ? 'active' : ''">城市</span>
      <span :class="activeIndex === 2 ? 'active' : ''">区县</span>
    </div>
    <div class="content scroll-b" v-if="activeIndex === 0">
      <div
        v-for="(item, index) in shenData"
        :key="item.id"
        :class="['item', itemIndex === index ? 'activeItem' : '']"
        @click="loadCityPoy(item.name, index, item.code)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="content" v-if="activeIndex === 1">
      <div
        v-for="(item, index) in cityData"
        :key="item.id"
        :class="['item', itemIndex === index ? 'activeItem' : '']"
        @click="loadCountie(item.name, index, item.code)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="content" v-if="activeIndex === 2">
      <div
        v-for="(item, index) in countie"
        :key="item.id"
        :class="['item', itemIndex === index ? 'activeItem' : '']"
        @click="loadPoyly(item.code)"
      >
        {{ item.name }}
      </div>
    </div>
    <el-button
      align="right"
      type="primary"
      style="
        margin-top: 15px;
        width: 146px;
        height: 40px;
        border-radius: 4px;
        opacity: 1;
        background: linear-gradient(90deg, #3f97f0 3%, #003f82 99%);
      "
      @click="clearDataScoure"
      >清除面</el-button
    >
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { getProvinces, getCities, getCounties, getLocation } from '../../../../../api/district'
import { createPolygon } from '../../../../../api/gis3d/maputils'
import { ElMessage } from 'element-plus'
const shen = ref('')
const shi = ref('')
const xian = ref('')
const activeIndex = ref(0)
const itemIndex = ref(-1)
const shenData = ref([])
const cityData = ref([
  {
    id: 1,
    name: 'beijing'
  },
  {
    id: 2,
    name: 'tianjin'
  }
])
const countie = ref([])
const fullname = computed(() => {
  return shen.value + shi.value + xian.value
})

let polygon = false
let edit = null
let del = null
let obj = {}
const loadCityPoy = (name, index, code) => {
  if (polygon) {
    viewer.dataSources.removeAll()
  }
  var data = {
    type: 'data_province',
    code: code
  }
  getLocation(data).then((e) => {
    const geojsonData = JSON.parse(e.geodata.value)
    polygon = Cesium.GeoJsonDataSource.load(geojsonData, {
      stroke: Cesium.Color.GREEN,
      fill: Cesium.Color.fromCssColorString('#fee5e680') || Cesium.Color.RED.withAlpha(0.5),
      strokeWidth: 2,
      clampToGround: true
    })

    polygon.then((dataSource) => {
      viewer.dataSources.add(dataSource)
      viewer.flyTo(dataSource.entities.values)
    })
  })

  getCities({ provinceCode: name }).then((e) => {
    if (e.length <= 0) {
      ElMessage({
        message: '暂未下级数据',
        type: 'warning'
      })
      return
    }
    itemIndex.value = index
    shen.value = name
    activeIndex.value = 1
    cityData.value = e
  })
}

const loadCountie = (name, index, code) => {
  if (polygon) {
    viewer.dataSources.removeAll()
  }
  var data = {
    type: 'data_city',
    code: code
  }

  getLocation(data).then((e) => {
    const geojsonData = JSON.parse(e.geodata.value)
    polygon = Cesium.GeoJsonDataSource.load(geojsonData, {
      stroke: Cesium.Color.GREEN,
      fill: Cesium.Color.fromCssColorString('#fee5e680') || Cesium.Color.RED.withAlpha(0.5),
      strokeWidth: 2,
         clampToGround: true
    })
    polygon.then((dataSource) => {
      viewer.dataSources.add(dataSource)
      viewer.flyTo(dataSource.entities.values)
    })
  })
  shi.value = name
  getCounties({ provinceCode: shen.value, cityCode: name }).then((e) => {
    if (e.length <= 0) {
      ElMessage({
        message: '暂未下级数据',
        type: 'warning'
      })
      return
    }
    itemIndex.value = index
    shi.value = name
    activeIndex.value = 2
    countie.value = e
  })
}

const loadPoyly = (code) => {
  if (polygon) {
    viewer.dataSources.removeAll()
  }
  var data = {
    type: 'data_county',
    code: code
  }
  getLocation(data).then((e) => {
    const geojsonData = JSON.parse(e.geodata.value)
    polygon = Cesium.GeoJsonDataSource.load(geojsonData, {
      stroke: Cesium.Color.GREEN,
      fill: Cesium.Color.fromCssColorString('#fee5e680') || Cesium.Color.RED.withAlpha(0.5),
      strokeWidth: 2,
         clampToGround: true
    })
    polygon.then((dataSource) => {
      viewer.dataSources.add(dataSource)
      viewer.flyTo(dataSource.entities.values)
    })
  })
}

const toshen = (index) => {
  if (index === activeIndex) {
    return
  }
  activeIndex.value = 0
  shen.value = ''
  shi.value = ''
  xian.value = ''
  cityData.value = []
  countie.value = []
}
const toshi = () => {
  if (!shen.value) {
    ElMessage({
      message: '请先选择省',
      type: 'warning'
    })
    return
  }

  activeIndex.value = 1
  shi.value = ''
  xian.value = ''
  countie.value = []
}
const clearDataScoure = () => {
  viewer.dataSources.removeAll()
}
onMounted(() => {
  getProvinces().then((e) => {
    shenData.value = e
  })
})
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  .address {
    height: 30px;
    color: #fff;
  }
  .areaName {
    height: 40px;
    border-top: 1px solid #fff;
    text-align: center;
    line-height: 40px;
    display: flex;
    cursor: pointer;
    span {
      flex: 1;
      background-color: #837e7e;
    }
    .active {
      background-color: #44a5ff;
    }
  }

  .content {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    color: #fff;
    margin-top: 15px;
    max-height: 300px;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 6px;
      height: 8px;
    }
    &::-webkit-scrollbar-button {
      display: none;
    }
    &::-webkit-scrollbar-thumb {
      background: #01c2ff;
      cursor: pointer;
      border-radius: 4px;
    }
    &::-webkit-scrollbar-corner {
      display: none;
    }
    &::-webkit-resizer {
      display: none;
    }
    .item {
      padding: 5px 15px;
      border-radius: 4px;
      cursor: pointer;
      background-color: #837e7e;
      margin-bottom: 10px;

      padding: 5px 15px;
      border-radius: 4px;
      cursor: pointer;
      background-color: #837e7e;
      margin-bottom: 10px;
      margin-right: 13px;
      width: 95px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .item:hover {
      background-color: #44a5ff;
    }
  }
  .activeItem {
    background-color: #44a5ff;
  }
}
</style>